<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引包 -->
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 容器|模板 -->
    <div id="app">

    </div>
</body>
</html>
<script>
    // Vue类的实例
    function Vue(options){
        console.log('options即为天天书写配置项底层做事')
        this.$el = document.querySelector(options.el);
    }
     //关联VM
     const VM = new Vue({
         el:'#app',
         data:{
             msg:"今天是愚人节哎"
         }
     })
     console.log(VM)



    //  组件  ： Vue框架中组件，实质即为构造函数VueComponent类
    function extend(){
        return function VueComponent(){

        }
    }


    // 组件：即为构造函数VueComponent, extend函数返回的结果 【构造函数】
    let Student = extend();

    // 组件里面的this, 组件实例 ， 实质是VueComponent类的实例，只不过VueComponent构造函数不是咱们自己调用的
    // 自己手动调用
    let VC = new Student;
    console.log(VC)
</script>